<template>
  <nm-container>
    <el-form label-width="100px" :inline="true" style="background:white;">
      <el-form-item label="所属车站：" prop="station_id">
        <el-select v-model="list.model.station_id" placeholder="请选择">
          <el-option v-for="item in station_idList" :key="item.value" :label="item.label" :value="item.value" clearable> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班次号：" prop="bus_id">
        <el-select v-model="list.model.bus_id" placeholder="请选择" clearable>
          <el-option v-for="item in classesList" :key="item.busNum" :label="item.busNum" :value="item.busNum"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="线路ID：" prop="route_id">
        <el-select v-model="list.model.route_id" placeholder="请选择">
          <el-option v-for="item in lineList" :key="item.lineId" :label="item.lineName" :value="item.lineId" clearable> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运营类别" prop="work_type">
        <el-select v-model="list.model.work_type" placeholder="请选择">
          <el-option label="单营" value="1"></el-option>
          <el-option label="共营" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运营方式：">
        <el-select v-model="list.model.work_way" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="直达" value="1"></el-option>
          <el-option label="普通" value="2"></el-option>
          <el-option label="公交" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区域类型：">
        <el-select v-model="list.model.district_type" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="县内班线" value="0"></el-option>
          <el-option label="县际班线" value="1"></el-option>
          <el-option label="市际班线" value="2"></el-option>
          <el-option label="省际班线" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车次类型：">
        <el-select v-model="list.model.bus_type" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="固定" value="0"></el-option>
          <el-option label="流水" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发车时间：" prop="start_time">
        <el-time-picker v-model="list.model.start_time" placeholder="选择时间" value-format="HH:mm" format="HH:mm" clearable> </el-time-picker>
      </el-form-item>
      <el-form-item label="运行周期：">
        <el-input v-model="list.model.run_cycle"></el-input>
      </el-form-item>
      <el-form-item label="开始序号：">
        <el-input v-model="list.model.run_start_serial"></el-input>
      </el-form-item>
      <el-form-item label="是否报道后售票：" label-width="200">
        <el-select v-model="list.model.is_saleafterreport" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="是" value="true"></el-option>
          <el-option label="否" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否实名制：">
        <el-select v-model="list.model.is_realname" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="是" value="true"></el-option>
          <el-option label="否" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开停状态：">
        <el-select v-model="list.model.status" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="开" value="true"></el-option>
          <el-option label="停" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期：">
        <el-date-picker v-model="list.model.start_date" type="date" placeholder="选择日期"> </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期：">
        <el-date-picker v-model="list.model.end_date" type="date" placeholder="选择日期"> </el-date-picker>
      </el-form-item>

      <!-- 
      <el-form-item label="候车厅：">
        <el-input v-model="list.model.waitting_room"></el-input>
      </el-form-item>
      <el-form-item label="检票口：" prop="check_gate">
        <el-input v-model="list.model.bus_id" clearable />
      </el-form-item>
      <el-form-item label="互联网张数：">
        <el-input v-model="list.model.interlink_quantity"></el-input>
      </el-form-item> -->

      <nm-button type="primary" icon="search" @click="ListData" text="查询" style="margin-left:20px"></nm-button>
      <nm-button type="info" @click="refreshData">
        <nm-icon name="refresh"></nm-icon>
        重置
      </nm-button>
      <nm-button v-bind="buttons.add" @click="getPop">添加</nm-button>
    </el-form>

    <el-table ref="topictable" :max-height="height" id="tableData" :data="getList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;">
      <el-table-column label="#" type="index" width="50"> </el-table-column>
      <el-table-column label="所属车站" width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.lineDetailInfo && scope.row.lineDetailInfo.stationName">{{ scope.row.lineDetailInfo.stationName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线路" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.lineDetailInfo && scope.row.lineDetailInfo.lineName">{{ scope.row.lineDetailInfo.lineName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="起始站" width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.lineDetailInfo && scope.row.lineDetailInfo.startStation">{{ scope.row.lineDetailInfo.startStation }}</span>
        </template>
      </el-table-column>
      <el-table-column label="终点站" width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.lineDetailInfo && scope.row.lineDetailInfo.endStation">{{ scope.row.lineDetailInfo.endStation }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="busNum" label="班次号"> </el-table-column>
      <el-table-column prop="startTime" label="开点" width="180"></el-table-column>
      <el-table-column prop="totalSeat" label="座位"> </el-table-column>
      <el-table-column prop="status" label="开停">
        <template slot-scope="scope">
          <span>{{ scope.row.status == true ? '开' : '停' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="busType" label="车次类型">
        <template slot-scope="scope">
          <span>{{ scope.row.busType == 1 ? '固定班' : '流水班' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="runCycle" label="运行周期"> </el-table-column>
      <el-table-column prop="isRealName" label="是否实名制" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.isRealName == true ? '实名' : '未实名' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="checkGate" label="检票口"> </el-table-column>

      <el-table-column prop="waitingRoom" label="候车厅"> </el-table-column>
      <el-table-column prop="parkingSpace" label="发车位"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <nm-button v-bind="buttons.edit" @click="editModel(scope.row)" />
          <nm-button-delete v-bind="buttons.del" :id="scope.row.id" :action="removeAction" @success="refresh"></nm-button-delete>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination background layout="prev, pager, next" :total="total / 10" /> -->
    <el-pagination @current-change="paginationChange" background layout="prev, pager, next" :total="total" />

    <save-page :id="curr.id" :visible.sync="dialog.save" @success="refresh" />
    <plan-classes v-if="dialog" @success="refresh" :show="dialog" @hide="isHide" :isAdd="isAdd" :busData="busData" />
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
import SavePage from '../components/save'
import planClasses from '../components/planClasses'

const api = $api.dispatch.bus_Info
export default {
  name: page.name,
  mixins: [mixins.list],
  components: { SavePage, planClasses },
  data() {
    return {
      pageIndex: 1,
      height: 400,
      station_idList: [],
      busData: {},
      getList: [],
      total: 1,
      lineList: [],
      list: {
        title: page.title,
        cols,
        action: api.querybusinfo,
        model: {
          /** 车次号 */
          bus_id: '',
          station_id: '',
          route_id: '',
          work_type: '',
          work_way: '',
          district_type: '',
          bus_type: '',
          start_time: '',
          run_cycle: '',
          run_start_serial: '',
          is_saleafterreport: '',
          is_realname: '',
          status: '',
          start_date: '',
          end_date: '',

          // check_gate: '',
          // waitting_room: '',
          // parking_space: '',
          // run_time: '',
          // scrollbus_check_time: '',
          // total_seat: '',
          // interlink_quantity: '',
          // remark: ''
        },
      },
      removeAction: api.remove,
      buttons: page.buttons,
      dialog: false,
      isAdd: true,
      classesList: [],
      pageIndex: 1,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.stationList()
    this.getLineData()
    this.getClasses()
  },
  methods: {
    paginationChange(val) {
      this.pageIndex = val
      this.ListData()
    },
    getTime(t) {
      var d = new Date(t)
      var h = d.getHours()
      var m = d.getMinutes()
      return `${h < 10 ? '0' + h : h}: ${m < 10 ? '0' + m : m}`
    },
    refreshData() {
      this.list.model = {}
    },
    refresh() {
      this.ListData()
    },
    ListData() {
      this.list.model['Page.Index'] = this.pageIndex
      this.list.model['Page.Size'] = 10
      api.querybusinfo(this.list.model).then((res) => {
        this.getList = res.rows
        this.total = res.total
      })
    },
    getLineData() {
      api.querylineinfo().then((res) => {
        res.unshift({ lineId: '全部', lineName: null })
        this.lineList = res
      })
    },
    stationList() {
      api.organizationQuery().then((res) => {
        res.rows.unshift({ name: '全部', id: null })
        var list = res.rows.map((item) => {
          return { label: item.name, value: item.code }
        })
        this.station_idList = list
      })
    },
    //获取班次列表
    getClasses() {
      api.querybusinfoforselect().then((res) => {
        this.classesList = res
      })
    },
    getPop() {
      this.isAdd = false
      this.dialog = true
    },
    isHide(n) {
      this.dialog = false
      if (n) this.ListData()
    },
    editModel(e) {
      this.busData = e
      this.isAdd = true
      this.dialog = true
    },
  },
}
</script>
